---
type: tutorial
unitTitle: Créer et déployer votre premier site Astro
title: 'Embarquement : Unité 1 - Configuration'
description: >-
  Tutoriel : Créer votre premier blog avec Astro —

  Préparez votre environnement de développement, créez et déployez votre
  premier site Astro
i18nReady: true
head:
  - tag: title
    content: "Tutoriel de création d'un blog : Unité 1 - Configuration | Docs"
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous savez ce que vous allez créer, il est temps de configurer tous les outils dont vous aurez besoin !

Cette unité vous montre comment configurer votre environnement de développement et déployer sur Netlify. Passez directement à l'[unité 2](/fr/tutorial/2-pages/) si vous êtes déjà à l'aise avec votre environnement et votre flux de travail.

:::tip[Suivre le tutoriel dans un éditeur de code en ligne]

Vous préférez suivre ce tutoriel dans un éditeur de code en ligne ? Suivez les instructions ci-dessous pour commencer à utiliser Google IDX.

<details>
<summary>Utilisation de Google IDX : suivez ces instructions, puis passez directement à l’unité 2 !</summary>

**Configurer IDX**

<Steps>
1. Suivez le lien externe pour [ouvrir le modèle « Empty project » dans un nouvel espace de travail sur IDX](https://astro.new/minimal?on=idx).

2. Suivez l’invite pour vous connecter à votre compte Google si vous n’êtes pas déjà connecté.

3. Saisissez un nom pour votre projet si vous souhaitez remplacer le nom par défaut « Empty project ». Cliquez sur **Créer**.

4. Attendez que l'espace de travail soit créé. Cela peut prendre 30 à 60 secondes. Si tout se passe bien, vous verrez le projet Astro chargé dans un éditeur de code en ligne.

5. Attendez qu'IDX exécute deux scripts : un pour installer Astro et un autre pour démarrer le serveur de développement. Notez que vous pouvez voir brièvement un message indiquant que votre espace de travail « n'a pas pu trouver Astro » si votre espace de travail se charge avant la fin de l'installation d'Astro. Ce message peut être ignoré et annulé s'il ne s'efface pas de lui-même.
</Steps>

**Faire un changement**

Si tout se passe bien, vous devriez voir le code du fichier `src/pages/index.astro` ouvert en écran partagé avec un aperçu en direct du site web. Suivez les instructions dans [« Écrire votre première ligne d'Astro »](/fr/tutorial/1-setup/3/) pour apporter une modification à ce fichier.

**Créer un dépôt GitHub**

<Steps>
1. Accédez à l'élément de navigation « Contrôle de source » dans la barre de menu verticale ou ouvrez avec <kbd>CTRL + SHIFT + G</kbd>. 

2. Sélectionnez l'option Publier sur GitHub. Cela créera un nouveau dépôt dans votre compte GitHub.
3. Suivez les instructions pour vous connecter à votre compte GitHub.
4. Une fois connecté, revenez à l'onglet IDX et vous aurez le choix de nommer votre nouveau dépôt et de choisir si vous souhaitez créer un dépôt privé ou public. Vous pouvez choisir n'importe quel nom et n'importe quel type de dépôt pour ce tutoriel.
5. IDX effectuera un commit initial et publiera dans votre nouveau dépôt GitHub.
6. À l'avenir, chaque fois que vous aurez des modifications à valider sur GitHub, l'icône de navigation du contrôle de source affichera un numéro. Il s'agit du nombre de fichiers qui ont été modifiés depuis votre dernière validation. En accédant à cet onglet et en effectuant deux étapes (validation et publication), vous pourrez saisir un message de validation et mettre à jour votre dépôt.
</Steps>

**Déployer votre site**

Si vous souhaitez déployer sur Netlify et disposer d'une version en ligne de votre site pendant que vous travaillez, passez à l'unité 1 pour [Déployer votre site sur le web](/fr/tutorial/1-setup/5/).

Sinon, passez à l'[unité 2](/fr/tutorial/2-pages/) pour commencer à créer avec Astro !

</details>

{/* StackBlitz instructions 
<details>
<summary>Utilisation de StackBlitz : Suivez ces instructions, puis passez directement à l'unité 2 !</summary>

**Configuration de StackBlitz**

<Steps>
1. Suivez le lien externe pour [ouvrir le modèle « Empty project » sur StackBlitz](https://astro.new/minimal?on=stackblitz).

2. Cliquez sur "Sign in" en haut à droite pour vous connecter en utilisant vos identifiants GitHub.

3. En haut à gauche de la fenêtre de l'éditeur StackBlitz, cliquez sur « fork » le modèle (enregistrer dans le tableau de bord de votre compte).

4. Attendez que le projet se charge, et vous verrez un aperçu en direct du modèle de « Empty Project ».
</Steps>
  
**Apporter une modification**

Dans le volet des fichiers, vous devriez voir `src/pages/index.astro`. Cliquez pour l'ouvrir, et suivez [Écrivez votre première ligne Astro](/fr/tutorial/1-setup/3/) pour apporter une modification à ce fichier.

**Créer un dépôt GitHub**
  
<Steps>
1. Appuyez sur le bouton <kbd>Connect Repository</kbd> en haut de votre liste de fichiers, saisissez un nouveau nom pour votre dépôt, puis cliquez sur <kbd>Create repo & push</kbd>.

2. Lorsque vous avez des modifications à valider sur GitHub, un bouton « Commit » apparaîtra en haut à gauche de votre espace de travail. En cliquant dessus, vous pourrez saisir un message de validation et mettre à jour votre dépôt.
</Steps>
  
**Déployer votre site**

Si vous souhaitez déployer sur Netlify et disposer d'une version en ligne de votre site pendant que vous travaillez, passez à l'unité 1 pour [Déployer votre site sur le web](/fr/tutorial/1-setup/5/).

Sinon, passez à l'[unité 2](/fr/tutorial/2-pages/) pour commencer à créer avec Astro !

</details>
*/}
:::

## Vers quoi vous dirigez-vous ?

Dans cette unité, vous allez **créer un nouveau projet** qui est **sauvegardé en ligne sur GitHub** et **connecté à Netlify**.

En écrivant du code, vous validerez périodiquement vos modifications sur GitHub. Netlify utilisera les fichiers de votre dépôt GitHub pour compiler votre site web, puis le publiera sur Internet à une adresse unique où tout le monde pourra le consulter.

Chaque fois que vous validez une modification sur GitHub, une notification sera envoyée à Netlify. Ensuite, Netlify recompilera automatiquement votre site pour refléter ces modifications.



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je suis prêt à configurer un environnement de développement pour un projet Astro !
</Checklist>
</Box>
